<template>
    <view class="pub_page pub_withdrawal pub_header_padding">
        <pub-head :headerConfig="headerConfig"></pub-head>
        <pub-dialog v-show="dialogShow" :dialogConfig="dialogConfig" @dialogBack="dialogBack"></pub-dialog>
        <div class="pub_page_scroll page_box">
            <div class="num_div">
                <div class="box">
                    <div class="txt">当前可提现{{openTypeName[openType]}}</div>
                    <div class="num">{{userInfo.turnover || 0}}</div>
                </div>
            </div>
            <div class="input_div">
                <div class="title">提现金额</div>
                <div class="input_box">
                    <div class="inputs">
                        <input v-model="num" class="input" type="text" placeholder="手动输入提现金额" maxlength="7" />
                        <div class="span">元</div>
                    </div>
                    <div class="msgs">
                        <div class="li">
                            <div class="txt txt_red">*最小提现金额：{{withdrawalMin}} 元</div>
                        </div>
                        <div class="li">
                            <div class="txt">当前提现手续费</div>
                            <div class="txt">{{numDeduct}} 元</div>
                        </div>
                        <div class="li">
                            <div class="txt">到账金额</div>
                            <div class="txt txt_red">{{numActual}} 元</div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
            <div class="input_div">
                <div class="title">支付密码</div>
                <div class="input_box">
                    <div class="inputs">
                        <input v-model="payPassword" class="input" type="password" maxlength="6" placeholder="请输入" />
                    </div>
                </div>
            </div>
            <div class="pub_btn" @click="toDeal('to_withdrawal')">确定提现</div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                header_color: '#fff',
                title: '提现',//标题栏内容
                left_type: 3,
                title_color: '#000',
                left_content: 'dark',
            },
            dialogShow: false,
            dialogType: '',
            dialogConfig: {
                title: '提示',//标题栏内容
                content: ''
            },

            openType: 1,//1营业额提现
            openTypeName: ['', '营业额'],//1营业额提现

            payPassword: '',
            num: '',//提现金额
            numPro: 0,//手续费率
            numDeduct: 0,//扣除的金额
            numActual: 0,//到账金额

            withdrawalMin: 0,
        };
    },
    watch: {
        num: {
            handler() {
                this.num = this.num.replace(/^(0+)|[^\d]+/g, '');
                this.numDeduct = Math.round(this.num * this.numPro * 100) / 100;
                this.numActual = Math.round(this.num * 100 - this.numDeduct * 100) / 100;
            },
            immediate: true,
            deep: true
        },
    },
    onLoad(options) {
        this.openType = Number(options.openType)
        this.getUserInfo({})
        this.getWithdrawConfig()
    },
    methods: {
        dialogBack(data) {
            // console.log(data);
            this.dialogShow = false;
            if (data.key == 1) {
                this.toDeal(this.dialogType)
            }
        },
        // 获取提现配置
        async getWithdrawConfig() {
            let configRes = await getApp().getConfigList();
            this.numPro = configRes?.withdrawalPro || '';
            this.withdrawalMin = configRes?.withdrawalMin || '';
        },
        async toDeal(type, data_1, data_2) {
            switch (type) {
                case 'to_withdrawal':
                    if (this.num == '' || !this.$comFun.ValidateNum(this.num) || this.num < this.withdrawalMin) {
                        this.$comFun.toast('请先填写正确的金额');
                        return;
                    }
                    if (!this.payPassword) {
                        this.$comFun.toast('请先填写支付密码');
                        return;
                    }
                    this.dialogType = 'sure_withdrawal';
                    this.dialogConfig = {
                        title: '提示',//标题栏内容
                        content: '是否确定进行提现？'
                    }
                    this.dialogShow = true;
                    break;
                case 'sure_withdrawal':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.post('user/applyWithdrawal', {
                        money: this.num,
                        payPassword: this.payPassword
                    });
                    // console.log(res_2);
                    this.$comFun.closeLoading();
                    if (res_2.code == 200) {
                        this.num = '';
                        this.payPassword = '';
                        this.$comFun.toast('操作成功');
                        setTimeout(() => {
                            uni.switchTab({
                                url: '/pages/mine/index'
                            });
                        }, 1000)
                    } else {
                        this.$comFun.toast(res_2.message);
                    }
                    break;
                default:
                    break;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.pub_withdrawal {
    .page_box {
        // padding: 0 24rpx;

        .num_div {
            width: 100%;
            min-height: 300rpx;
            background: url("@/static/bimg/img_28.png") center no-repeat;
            background-size: 105% 100%;
            padding: 30rpx 0 0 0;

            .box {
                width: 100%;
                height: 194rpx;
                display: flex;
                flex-wrap: wrap;
                align-content: center;
            }

            .txt {
                width: 100%;
                text-align: center;
                font-size: 24rpx;
                color: rgba(255, 255, 255, 0.8);
                line-height: 32rpx;

                .icon {
                    font-size: 32rpx;
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 10rpx;
                }
            }

            .num {
                width: 100%;
                text-align: center;
                font-size: 56rpx;
                color: #ffffff;
                line-height: 56rpx;
                font-weight: 700;
                margin-top: 14rpx;
            }
        }

        .input_div {
            padding: 0 24rpx;

            .title {
                font-size: 32rpx;
                color: #222;
                line-height: 44rpx;
                font-weight: 700;
            }

            .input_box {
                background: #fafafa;
                border-radius: 24rpx;
                margin-top: 32rpx;
                padding: 0 24rpx;
            }

            .inputs {
                width: 100%;
                height: 120rpx;
                background: #fafafa;
                display: flex;
                padding: 20rpx 0;

                .span {
                    font-size: 32rpx;
                    color: #111827;
                    line-height: 80rpx;
                }

                .input {
                    flex: 1;
                    font-size: 32rpx;
                    color: #111827;
                    line-height: 80rpx;
                    height: 80rpx;
                }

                .uni-input-placeholder {
                    color: rgba(17, 24, 39, 0.45) !important;
                    font-size: 28rpx;
                }
            }
            .msgs {
                border-top: 2rpx solid #d0d1d3;
                padding: 40rpx 0;
                .li {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 20rpx;
                    .txt {
                        line-height: 32rpx;
                        color: #111827;
                        font-size: 24rpx;
                    }
                    .txt_red {
                        color: red;
                    }
                }
                .li:last-child {
                    margin-bottom: 0;
                }
            }
        }

        .pub_btn {
            position: fixed;
            bottom: 80rpx;
            left: 5%;
            width: 90%;
        }
    }
}
</style>
